<template>
  <div>
    <!-- 
      isShowAttrList true 显示 AttrList，此时不禁用
      isShowAttrList false 显示 AddOrUpdateAttr，此时禁用
     -->
    <CategorySelector :disabled="!isShowAttrList" />
    <!-- 
      $event 代表触发事件的第一个参数
     -->
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="isShowAttrList = $event"
    />
    <AddOrUpdateAttr v-else @setIsShowAttrList="isShowAttrList = $event" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import AttrList from "./components/AttrList.vue";
import AddOrUpdateAttr from "./components/AddOrUpdateAttr.vue";

defineOptions({
  name: "Attr",
});

const isShowAttrList = ref(true);
</script>

<style scoped lang="scss"></style>
